<template>
	<view class="safedetailcontent">
		<tn-form class="tn-padding-right-sm tn-padding-left-sm tn-padding-bottom" :model="detailInfo" ref="form" :borderBottom="false" :labelWidth="200" labelAlign="right" :errorType="['message']">
		    <tn-form-item label="风险位置" prop="name" :labelStyle="{color:'#777777'}">
		      <text v-if="detailInfo.classRoomName">{{detailInfo.classRoomName}}教室</text>
			  <text v-else>-</text>
		    </tn-form-item>
		    <tn-form-item label="责任人" prop="intro" :labelStyle="{color:'#777777'}">
		      <text v-if="detailInfo.responsiblePersonStr">{{detailInfo.responsiblePersonStr}}</text>
			  <text v-else>-</text>
		    </tn-form-item>
		    <tn-form-item label="风险编号" prop="sex" :required="true" :labelStyle="{color:'#777777'}">
				<view class="mingc-inp">
					 <tn-input  class="" v-model="detailInfo.riskNumber" />
				</view>
		     
		    </tn-form-item>
		    <tn-form-item label="风险源名称" prop="sex" :required="true" :labelStyle="{color:'#777777'}">
			  <view class="mingc-inp">
			  	 <tn-input  class="" v-model="detailInfo.riskSourceName" />
			  </view>
		    </tn-form-item>
		    <tn-form-item label="风险因素" prop="sex" :required="true" :labelStyle="{color:'#777777'}">
			  <view class="mingc-inp">
				<tn-input  class="" v-model="detailInfo.riskFactors" type="textarea" :height="120" />
			  </view>
		    </tn-form-item>
		    <tn-form-item label="风险类别" prop="sex" :required="true" :labelStyle="{color:'#777777'}">
			  <view class="mingc-inp">
		      <tn-input  class="" v-model="detailInfo.riskCategory" />
			  </view>
		    </tn-form-item>
		    <tn-form-item label="风险等级" prop="sex" :required="true" :labelStyle="{color:'#777777'}">
			  <view class="mingc-inp">
		      <tn-input  class="" v-model="detailInfo.riskLevelStr" type="select" @click="show = true" />
			  </view>
		    </tn-form-item>
		    <tn-form-item label="可能导致的事故及后果" prop="sex" :required="true" labelPosition="top" :labelStyle="{color:'#777777', paddingLeft: '40rpx'}">
				<view class="tn-padding-left-sm">
					<view class="mingc-inp ">
					<tn-input  class="" v-model="detailInfo.possibleAccidents" type="textarea" :height="120" />
					</view>
				</view>
		    </tn-form-item>
		    <tn-form-item label="风险现场照片" prop="sex" :required="true" labelPosition="top" :labelStyle="{color:'#777777', paddingLeft: '40rpx'}">
				<view class="imgs-content-view tn-padding-left-sm">
					<view v-for="(item,index) in fileList" :key="index" class="tn-image-upload__item">
						<image class="tn-image-upload__item__image" :src="item.src" mode="aspectFill" @click="showImage(item)"></image>
						<text class="tn-icon-close" @click="deletePhoto(item, index)"></text>
					</view>
				</view>
				<text class="tn-icon-camera tn-padding-left-sm" style="font-size: 70rpx;" @click="getLocalImg"></text>
		    </tn-form-item>
		    <tn-form-item label="管控依据" prop="sex" :required="true" labelPosition="top" :labelStyle="{color:'#777777', paddingLeft: '40rpx'}">
				<view class="tn-padding-left-sm">
					  <view class="mingc-inp">
					  <tn-input  class="" v-model="detailInfo.controlBasis" type="textarea" :height="120" />
					  </view>
				</view>
		    </tn-form-item>
		</tn-form>
		<view class="botm-view tn-width-full">
			
			<!-- <tn-button class="bottom-btn" backgroundColor="#01BEFF" fontColor="tn-color-white" @click="uploadImgs">提交</tn-button> -->
			<view class="login__body__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150" @click="uploadImgs">提交</view>
		</view>
		<tn-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></tn-action-sheet>
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
			<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
			<text class="tn-icon-close" @click="previewImg=''"></text>
		</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	export default{
		name: 'safelist',
		data(){
				return {
					
					detailInfo: {
						"id": "",
						"gardenHouseClassRoomId": "",
						responsiblePersonStr: '',
						classRoomName: '',
						"responsiblePerson": "",
						"riskNumber": "",
						"riskSourceName": "",
						"riskFactors": "",
						"riskCategory": "",
						"riskLevel": '',
						"possibleAccidents": "",
						"imageList": [],
						"controlBasis": ""
					},
					actionSheetList: [
						{id: 1, text: '低风险'},
						{id: 2, text: '一般风险'},
						{id: 3, text: '较大风险'},
						{id: 4, text: '严重风险'},
					],
					show: false,
					fileList: [],
					filePathList: [],
					previewImg: '',
					imageTitle: '',
					roomId: '',
					roomInfo: {},
					removeImageIds: [],
					detailId: ''
				}
		},
		onLoad:function(options){
			console.log(options.id);   // 2
			this.roomId = options.id
			this.getRoomDetail();
			if(options.detailId){
				this.detailId = options.detailId
				this.getDetail()
			}
		},
		onShow() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
		},
		mounted() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
		},
		methods: {
			getDetail(){
				if(!this.detailId){
					return
				}
				this.request({
					url: '/InspectionRecord/Datail',
					method: 'get',
					params: {
						inspectionId: this.detailId
					},
				}).then(res => {
					if(res.code == 200){
						if(res.data.imageList){
							res.data.imageList.forEach(item => {
								item.src = this.imageTitle + item.id;
								this.filePathList.push(item)
								this.fileList.push(item)
							})
						}
						this.detailInfo = res.data
					}else{
						this.$refs.toast.show({
						  title: '',
						  content: res.message || '查询失败',
						  icon: 'fail',
						  image: '',
						  duration: 1500
						})
					}
				})
			},
			showImage(item){
				console.log(item)
				this.previewImg = item;
			},
			actionSheetCallback(index) {
				this.detailInfo.riskLevel = this.actionSheetList[index].id;
				this.detailInfo.riskLevelStr = this.actionSheetList[index].text;
			},
			getRoomDetail(){
				if(!this.roomId){
					return
				}
				this.request({
					url: '/InspectionRecord/RoomInfo',
					method: 'get',
					params: {
						gardenHouseClassRoomId: this.roomId
					},
				}).then(res => {
					console.log(res)
					if(res.code == 200){
						this.roomInfo = res.data
						this.detailInfo.classRoomName = res.data.classRoomName
						this.detailInfo.gardenHouseClassRoomId = res.data.gardenHouseClassRoomId
						this.detailInfo.responsiblePerson = res.data.responsiblePerson
						this.detailInfo.responsiblePersonStr = res.data.responsiblePersonStr
					}else{
						this.$refs.toast.show({
						  title: '',
						  content: res.message || '查询失败',
						  icon: 'fail',
						  image: '',
						  duration: 1500
						})
						setTimeout(() => {uni.navigateBack();},2000)
							
					}
				})
			},
			getLocalImg(){
					if(this.fileList.length >= 9){
						return;
					}
					wx.chooseImage({
					   success: chooseResult => {
							chooseResult.tempFiles.forEach((item, index) => {
								if(this.fileList.length < 9){
									item.src = chooseResult.tempFilePaths[index]
									this.fileList.push(item)
									this.filePathList.push(chooseResult.tempFilePaths[index])
								}
							})
						}
					})
			},
			deletePhoto(item, index){
				this.fileList.splice(index, 1)
				this.filePathList.splice(index, 1)
				if(item.id){
					this.removeImageIds.push(item.id)
				}
				
			},
			async uploadImgs(){
				if(!this.detailInfo.classRoomName){
					this.$refs.toast.show({
					  title: '',
					  content: '未查询到风险位置',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				if(!this.detailInfo.riskNumber){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写风险编号',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				if(!this.detailInfo.riskSourceName){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写风险源名称',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				if(!this.detailInfo.riskFactors){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写风险源因素',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				if(!this.detailInfo.riskCategory){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写风险类别',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				if(!this.detailInfo.riskLevel){
					this.$refs.toast.show({
					  title: '',
					  content: '请选择风险等级',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				if(!this.detailInfo.possibleAccidents){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写可能导致后果',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				if(!this.detailInfo.controlBasis){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写风险依据',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				
				// let cresult = await this.contentCheck.checkRequest(2, this.renwutitle + this.introcontent)
				// if(!cresult){
				// 	return
				// }
				 let that = this;
				 let imgIdArr = [];
				 if(!this.fileList.length){
					this.$refs.toast.show({
					  title: '',
					  content: '请上传现场图片',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})	 
					return;
				 }
				 let uploadfiles = this.fileList.filter(item => {return !item.id})
				 if(!uploadfiles.length){
					 that.fabuFunction([])
				 }else{
					 
					 uploadfiles.forEach(item => {
					 		this.uploadPhoto(item, item.path, async (resData) => {
					 			if(resData.code == 200){
					 				imgIdArr.push(resData.data)
					 				if(imgIdArr.length == uploadfiles.length){
					 					that.fabuFunction(imgIdArr)
					 				}
					 			}
					 		})
					 })
				 }
			},
			uploadPhoto(file, filePath,callBack){
				uni.uploadFile({
				    url: this.config.apiUri + '/sysFileInfo/UploadFileInfo',
					// files: arr,
					name: 'file',
					file: file,
					filePath: filePath,
				    header: {
						'Authorization': 'Bearer '+ uni.getStorageSync('token')
				    },
				    success: (res) => {
						let resData = JSON.parse(res.data)
						if(resData.code == 200){
							if(callBack){
								callBack(resData);
							}
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: resData.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
				    },
					fail:(err) => {
						console.log(err)
					}
				});
			},
			fabuFunction(imgIdArr){
				let postData = {
					  "gardenHouseClassRoomId": this.detailInfo.gardenHouseClassRoomId,
					  "responsiblePerson": this.detailInfo.responsiblePerson,
					  "riskNumber": this.detailInfo.riskNumber,
					  "riskSourceName": this.detailInfo.riskSourceName,
					  "riskFactors": this.detailInfo.riskFactors,
					  "riskCategory": this.detailInfo.riskCategory,
					  "riskLevel": this.detailInfo.riskLevel,
					  "possibleAccidents": this.detailInfo.possibleAccidents,
					  "fileIds": imgIdArr,
					  "controlBasis": this.detailInfo.controlBasis,
					  removeImageIds: this.removeImageIds
				}
				let url = '/InspectionRecord/Add'
				if(this.detailId){
					url = '/InspectionRecord/EditV2'
					postData.id = this.detailId
				}
				  this.request({
					url: url,
					method: 'post',
					params: postData
				  }).then(res => {
					  if(res.code == 200){
							uni.navigateBack();
							this.$refs.toast.show({
								title: '',
								content: '巡检成功',
								icon: 'success',
								image: '',
								duration: 1500
							})	  
					  }else{
						  this.$refs.toast.show({
						    title: '',
						    content: res.message,
						    icon: 'fail',
						    image: '',
						    duration: 1500
						  })
					  }
				  })
			},
		},
	}
</script>

<style lang="scss">
	.safedetailcontent{
		color: #555555;
		min-height: 100vh;
		background-color: rgba(255, 255, 255, 1);
		overflow-y: auto;
	}
	.mingc-inp{
		background-color: #ffffff;
		padding-left: 10rpx;
	}
	.imgs-content-view{
		  overflow: hidden;
	}
	  .tn-image-upload__item {
	    width: 100%;
	    height: 180rpx;
	    border-radius: 30rpx;
	    margin-bottom: 20rpx;
			  float: left;
	    &__image {
	      width: 100%;
	      height: 180rpx;
	      border-radius: 30rpx;
	    }
	  }
	  .tn-image-upload__item {
		    width: 160rpx;
		    height: 160rpx;
		    border-radius: 30rpx;
		    margin-bottom: 20rpx;
			margin-right: 20rpx;
			position: relative;
		    &__image {
		      width: 100%;
		      height: 100%;
		      border-radius: 30rpx;
		    }
			  .tn-icon-close{
				  position: absolute;
				  top: 10rpx;
				  right: 10rpx;
				  font-size: 40rpx;
			  }
		 } 
	.image-check-view{
			  position: fixed;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  z-index: 2;
			  background-color: rgba(1, 1, 1, 1);
			  .tn-icon-close{
				  position: absolute;
				  top: 10px;
				  right: 10px;
				  font-size: 36rpx;
				  z-index: 888;
			  }
	}
	.botm-view{
		width: 100%;
		padding: 20rpx;
	}
	.bottom-btn{
		width: 100% !important;
		
	}
  .login__body__item__button {
		     width: 100%;
		     height: 77rpx;
		     text-align: center;
		     font-size: 31rpx;
		     font-weight: bold;
		     line-height: 77rpx;
		     letter-spacing: 1em;
		     text-indent: 1em;
		     border-radius: 39rpx;
		     box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
			 margin-bottom: 20px;
	}
</style>